<template>
  <div class="friendsInvite">
    <headers><p></p></headers>
    <div class="i-content">
      <div>
        <img class="inivte-img" src="../../assets/image/invitation.png" alt="img">
      </div>
      <div class="i-fInvite">
        <div class="i-title">
          <p class="p-fri">你的好友邀请你</p>
          <p class="p-enjoy">体验GO-bikes电单车</p>
        </div>
        <div class="invite-num">
          邀请码: {{inviteNum}}
          <div @click="copy" class="copy">
            复制
          </div>
        </div>
        <div class="getinvite">
          你注册成功后您和好友都将获得3张免费骑行卷  
        </div>        
      </div>
    </div>
    <div class="i-footer">
      <div class="i-logo">
        <img class="logo-pic" src="../../assets/image/i-logo.png" alt="logo">
        <img  class="logo-font" src="../../assets/image/i-logo-font.png" alt="logo-font">
      </div>
      <div class="i-down">
        <a href="">
          下载客户端
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import headers from '@/components/header.vue'
export default {
  components: {headers},
  data () {
    return {
      inviteNum: ''
    }
  },
  mounted () {
    this.getTheApp()
  },
  methods: {
    getTheApp: function () {
      // this.inviteNum = _native_.getInventCode()
    },
    copy: function (e) {
      this.$message({
        message: '复制成功',
        type: 'success'
      })
    }
  }
}
</script>

<style>
.friendsInvite {
  background-color: yellow;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.headers {
  background-color: #fff;
}
.i-content {
  flex-grow: 1;
  background: -webkit-linear-gradient(right top, #6AD9EF ,  #01D7C8); /* Safari 5.1 - 6.0 */
  background: linear-gradient(to bottom left, #6AD9EF ,  #01D7C8); /* 标准的语法 */
}
.inivte-img {
  display: block;
  width: 5.63rem;
  height: 4.30rem;
  margin: .62rem auto 0;
}
.i-title {
  color: #fff;
  margin-top: -.2rem;
  text-align: center;
}
.p-fri {
  font-size: .3rem;
  line-height: .44rem;
}
.p-enjoy {
  font-size: .48rem;
  line-height: .7rem
}
.invite-num {
  width: 6.32rem;
  height: .91rem;
  margin: .3rem auto 0;
  border-radius: .45rem;
  background-color: #fff;
  font-size: .33rem;
  color: #999999;
  text-align: center;
  line-height: .91rem;
  position: relative;
}
.copy {
  width: 1.11rem;
  height: .6rem;
  border: 0.01rem solid #01D7C8;
  border-radius: .3rem;
  text-align: center;
  line-height: .6rem;
  color: #01D7C8;
  position: absolute;
  top: .16rem;
  right: .3rem;
}
.getinvite {
  font-size: .28rem;
  color: #ffffff;
  line-height: .42rem;
  text-align: center;
  margin-top: .3rem;
  opacity: 0.8;
}
.i-footer {
  height: 1.21rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  position: relative;
}
.i-logo {
  height: 1rem;
  position: absolute;
  left: .2rem;
  display: flex;
  align-items: center;
}
.logo-pic {
  width: .83rem;
  height: .83rem;
}
.logo-font {
  margin-left: .2rem;
  width: 1.52rem;
  height: .24rem;
}
.i-down {
  width: 2.05rem;
  height: .69rem;
  position: absolute;
  right: .2rem;
  background-color: #01D7C8;
  border-radius: .05rem;
}
.i-down a{
  display: block;
  width: 2.05rem;
  height: .69rem;
  font-size: .28rem;
  line-height: .69rem;
  text-align: center;
  color: #fff;
}
</style>

